<template>
  <div>
    <el-dialog :visible="dialogVisible"
               v-bind="$attrs"
               v-on="$listeners"
               @open="onOpen"
               @close="onClose"
               title="变更负责人"
    >
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label-width="110px" label="变更负责人：" prop="changeOwner">
          <el-select v-model="formData.changeOwner" placeholder="选择新的负责人变更负责人：" clearable
                     :style="{width: '100%'}"
          >
            <el-option v-for="(item, index) in changeOwnerOptions" :key="index" :label="item.label"
                       :value="item.value" :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="110px" label="将原负责人：" prop="changeStatus">
          <el-radio-group v-model="formData.changeStatus" size="medium">
            <el-radio v-for="(item, index) in changeStatusOptions" :key="index" :label="item.value"
                      :disabled="item.disabled"
            >{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label-width="155px" label="同时变更负责人至：" prop="field103">
          <el-checkbox-group v-model="formData.field103" size="medium">
            <el-checkbox v-for="(item, index) in field103Options" :key="index" :label="item.value"
                         :disabled="item.disabled"
            >{{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  components: {},
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        changeOwner: undefined,
        changeStatus: 1,
        field103: []
      },
      rules: {
        changeOwner: [{
          required: true,
          message: '选择新的负责人变更负责人：',
          trigger: 'change'
        }],
        changeStatus: [],
        field103: [{
          required: true,
          type: 'array',
          message: '请至少选择一个field103',
          trigger: 'change'
        }]
      },
      changeOwnerOptions: [{
        'label': '选项一',
        'value': 1
      }, {
        'label': '选项二',
        'value': 2
      }],
      changeStatusOptions: [{
        'label': '移出',
        'value': 1
      }, {
        'label': '转为团队成员',
        'value': 2
      }],
      field103Options: [{
        'label': '联系人',
        'value': 1
      }, {
        'label': '商机',
        'value': 2
      }, {
        'label': '合同',
        'value': 3
      }]
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    onOpen() {
    },
    onClose() {
      this.$refs['elForm'].resetFields()
    },
    close() {
      this.$emit('update:dialogVisible', false)
    },
    handleConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.close()
      })
    }
  }
}

</script>
<style>
</style>
